<!--
 * @Author: your name
 * @Date: 2021-10-21 17:22:28
 * @LastEditTime: 2024-09-10 15:24:02
 * @LastEditors: 耿琼琼 1342180668@qq.com
 * @Description: In User Settings Edit
 * @FilePath: \vue-ts\src\components\player\player.vue
-->
<!-- 加载视频流组件 -->
<template>
  <div id="player"></div>
</template>

<script lang="ts" setup>

import { onMounted, onUnmounted, ref } from 'vue'

import OnReady from '@/components/aircityutils/onReady'
import OnEvent from '@/components/aircityutils/Event'

// 初始化视频流
const palyerInit = (() => {
  new AirCityPlayer(HostConfig.Player, {
    domId: 'player', //HTML元素ID（它将作为要创建的Video标签的父元素），如果未设置此参数，则不传输视频流，只进行API调用
    iid: null, //云渲染实例的ID
    pid: null, //指定实例要加载的工程ID
    apiOptions: {
      onReady: OnReady, //视频流连接成功后初始化
      onEvent: OnEvent, // 监听在场景中的鼠标事件
      useColorLog: false //仅用于SDK测试页面，二次开发请设置为false
    }, //用于指定AirCityAPI的初始化选项
    ui: {
      startupInfo: false, //默认值为true，初始化过程中是否显示详细信息（如果不需要，直接去掉此属性即可）
      statusIndicator: false, //默认值为true，左上角闪烁的状态指示灯，可以从不同的颜色看出当前的状态
      statusButton: false, //默认值为false，是否在左下角显示信息按钮（如果不需要，直接去掉此属性即可）
      fullscreenButton: false, //默认值为false，是否在右下角显示全屏按钮（如果不需要，直接去掉此属性即可）
      homeButton: true, //默认值为false，是否在左下角显示“回到初始位置”按钮（如果不需要，直接去掉此属性即可）
      taskListBar: 2 //默认值为1，是否在下方显示“任务队列（API调用队列）”信息（0: 永不显示；1: 执行比较耗时的操作时显示；2: 一直显示）
    
    }
  })
})


onMounted(() => {
// 页面加载时调用初始化方法
  palyerInit()
  
})



</script>
<style lang="scss" scoped>
#player {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  // background-color: red;
}
</style>
